<template>
  <div class="echarts_contanier">
    <!-- 30.22隐藏以下代码 -->
    <!-- 30.8准备一个基本的容器 -->
    <!-- 30.10使用 ref 获取真实 dom -->
    <!-- <div class="echarts_box" ref="EchartsRef"></div> -->

    <!-- 30.23Home 文件夹新建 components 文件夹新建 Pie.vue，去到该文件 -->
    <!-- 30.35导入饼图 pie 子组件 -->
    <!-- 30.36去到 Home 文件夹新建 components 文件夹新建 Pie.vue 该文件  -->
    <!-- 30.52将接口返回的数据，父传子的方式传给子组件，去到 Pie.vue -->
    <Pie :data="pieData" />

    <!-- 三十一、数据可视化 echarts 地图 -->
    <!-- 31.1Home 文件夹新建 components 文件夹新建 Map.vue，去到该文件，引入该子组件  -->
    <Map :data="mapData" />
  </div>
</template>

<script lang="ts" setup>
import { ApiGetEcharts } from '@/http/api';
import Pie from '@/views/Home/components/Pie.vue'
import Map from '@/views/Home/components/Map.vue'
import { ref } from 'vue';

// 30.18隐藏所有代码
// import { onMounted, ref } from 'vue';
// 30.14导入 echarts
// import * as Echarts from 'echarts'

// 30.19隐藏所有代码
// 30.7echarts 的使用步骤：
// vue2 使用 v-charts ,vue3 使用 echarts
// (1)安装 npm i echarts
// (2)准备一个基本的容器，容器需要宽高
// (3)准备一个画图需要的配置
// (4)初始化图形

// 30.11获取该dom
// const EchartsRef = ref()

// 30.20隐藏所有代码
// 30.12在onMounted 生命周期里面查看是否获取 ref 成功
// onMounted(() => {
//   // 30.13打印查看获取 ref 结果
//   console.log(EchartsRef.value);

//   // 30.15echarts 必须的配置对象
//   const option = {
//     title: {
//       text: '柱状图示例'
//     },
//     tooltip: {},
//     xAxis: {
//       type: 'category',
//       data: ['1月', '2月', '3月', '4月', '5月', '6月']
//     },
//     yAxis: {
//       type: 'value'
//     },
//     series: [{
//       name: '销量',
//       type: 'bar',
//       data: [15, 20, 36, 10, 10, 20]
//     }]
//   };

//   // const option = {
//   //   title: {
//   //     text: '圆环图的例子',
//   //     left: 'center',
//   //     top: 'center'
//   //   },
//   //   series: [
//   //     {
//   //       type: 'pie',
//   //       data: [
//   //         {
//   //           value: 335,
//   //           name: 'A'
//   //         },
//   //         {
//   //           value: 234,
//   //           name: 'B'
//   //         },
//   //         {
//   //           value: 1548,
//   //           name: 'C'
//   //         }
//   //       ],
//   //       radius: ['40%', '70%']
//   //     }
//   //   ]
//   // };

//   // 30.16初始化，得到一个图像的实例
//   const exmaple = Echarts.init(EchartsRef.value)

//   // 30.17并且调用实例对象的 setOpation 方法，用来创建图形
//   exmaple.setOption(option)

// })

// 30.49定义响应式数据，存起来接口返回的饼图数据跟地图数据
const pieData = ref<ISalePie[]>([])
const mapData = ref<ISaleMap[]>([])

// 30.44发送接口请求 echarts 的数据
ApiGetEcharts().then(res => {
  // 30.45查看请求回来的数据，这里的状态码不是 res.code === 200，而是 errno: 0，所以我们需要去到 http 文件夹里面的 http.ts 去做错误码拦截的弹框提示
  // console.log(res);

  // 30.50将接口请求回来的数据赋值给 pieDate 和 mapData
  pieData.value = res.data.salePie
  mapData.value = res.data.saleMap

  // 30.51查看是否赋值成功
  // console.log('pieData', pieData.value);
  // console.log('mapData', mapData.value);

})


</script>

<style lang="less" scoped>
// 30.21隐藏以下代码
// 30.9样式宽高
// .echarts_box {
//   width: 100%;
//   height: 400px;
// }
</style>